<template>
    <div>
      <div style="width: 95%;margin: 20px auto">
      <div class="card" >
        <el-input v-model="data.key" clearable style="width: 200px;margin-right: 10px" placeholder="请输入订单编号"/>
        <el-button type="warning" plain @click="load(data.key)">搜索</el-button>
        <el-button type="danger" plain @click="delAll">批量删除</el-button>
      </div>
      <div class="card" style="margin-top: 5px" >
        <el-table :data="data.tableData" :row-key="getRowKeys" @selection-change="handleSelectionChange" min-height="250" style="width: 100%">
          <el-table-column type="selection" :reserve-selection="true" width="55" />
          <el-table-column label="订单号" >
            <template #default="scope">
              <a href="javascript:void (0)" style="color: #fc9002" @click="router.push('orderdateillist?orderno='+scope.row.orderno)">{{scope.row.orderno}}</a>
            </template>
          </el-table-column>
          <el-table-column prop="membername" label="用户信息" />
          <el-table-column label="菜品信息" width="200">
            <template #default="scope">
              <div v-html="scope.row.goodsname" />
            </template>
          </el-table-column>
          <el-table-column prop="total" label="订单金额" />
          <el-table-column  label="就餐人信息">
            <template #default="scope">{{scope.row.name}} {{scope.row.tel}}<br> {{scope.row.slnum}} 人</template>
          </el-table-column>
          <el-table-column  prop="status" label="订单状态" />
          <el-table-column prop="savetime" label="创建日期" />
          <el-table-column label="操作" >
            <template #default="scope">
              <template v-if="scope.row.status==='待付款'">
                <el-button type="success" plain size="small" @click="EditZf(scope.row)">付款</el-button>
                <el-button type="danger" plain size="small" @click="Delete(scope.row.id)">取消</el-button>
              </template>
              <template v-if="scope.row.status==='交易完成'">
                <el-button type="danger" plain size="small" @click="Delete(scope.row.id)">删除记录</el-button>
              </template>

            </template>
          </el-table-column>
        </el-table>

        <div v-if="data.total>0" style="display: flex;justify-content: center;margin: 15px">
          <el-pagination
              @current-change="load()"
              background
              layout="prev, pager, next"
              v-model:page-size="data.pageSize"
              v-model:current-page="data.pageNum"
              :total="data.total"/>
        </div>
      </div>
      </div>

      <el-dialog title="订单付款" width="50%" v-model="data.formVisible" :close-on-click-modal="false">
        <el-form :model="data.form" >
          <h2 style="text-align: center;color: red">付款金额 {{data.form.total}} 元</h2>
          <div style="display: flex;text-align: center;margin-left: 90px;">
            <div>
              <el-image :src="zfb" style="width: 260px;height: 260px;"/>
              <p style="margin: 0">支付宝</p>
            </div>
            <div>
              <el-image :src="wx" style="width: 260px;height: 260px;"/>
              <p style="margin: 0">微信</p>
            </div>

          </div>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
        </template>
      </el-dialog>
    </div>
</template>

<script setup>
import {createApp, onMounted, onUnmounted, reactive, ref} from "vue";
import request from '@/utils/request.js'
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";
import E from 'wangeditor'
import {useRouter} from "vue-router";
import {listenMsg} from "@/utils/crossTagMsg.js";
import zfb from '@/assets/imgs/zfb.jpg'
import wx from '@/assets/imgs/wechat2.jpg'
const router = useRouter()
//关闭弹框回调函数
const handleClose = () => {
  ElMessageBox.confirm('是否确认需要关闭当前窗口?')
      .then(() => {
        data.formVisible = false
      })
      .catch(() => {
      })
}
//提交是表单校验
const formRef = ref()
// 文件上传的接口地址
const uploadimgUrl = import.meta.env.VITE_BASE_URL + '/fles/upload'
const data = reactive({
  member: JSON.parse(localStorage.getItem('member') || '{}'),
  key:'',
  key1:'',
  pageNum: 1,
  pageSize: 10,
  total: 0,
  form: {},
  tableData:[],
  title:'',
  ids:[],
  formVisible:false,
})
const cancelListen = listenMsg(msginfo=>{
  if (msginfo.type==='订单更新'){
    load()
  }
})
onUnmounted(cancelListen)

//信息列表
const load =()=>{
  request.post('ordermsgList', qs.stringify({
    memberid:data.member.id,
    key:data.key,
    pageNum: data.pageNum,
    pageSize: data.pageSize,
  })).then(res => {
    data.tableData = res.data.list
    data.total = res.data.total
  })
}
/*
//订单付款
const orderFK =(orderno)=>{
  window.open(import.meta.env.VITE_BASE_URL+'/alipay/pay?orderno='+orderno)
}
*/
// 订单付款
const EditZf = (row) => {
  data.form = JSON.parse(JSON.stringify(row))
  data.formVisible = true
}
const save = ()=>{
  request.post('ordermsgFK', qs.stringify({
    id:data.form.id,
    orderno:data.form.orderno,
    status:'已付款'
  })).then(res => {
    if (res.code === '200') {
      ElMessage.success('操作成功')
      load()
      data.formVisible = false
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 确认收货
const orderSh = (row) => {
  request.post('ordermsgSH', qs.stringify({
    id:row.id,
    orderno:row.orderno,
    status:'交易完成'
  })).then(res => {
    if (res.code === '200') {
      ElMessage.success('操作成功')
      load()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 删除
const Delete = (id) => {
  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗?', { type: 'warning' }).then(res => {
    request.post('ordermsgDel?id=' + id).then(res => {
      if (res.code === '200') {
        load()
        ElMessage.success('操作成功')
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {})
}

//解决跨分页选中后分页取消的情况
const getRowKeys = (row)=>{
  return row.id;
}

//选中需要删除的对象
const handleSelectionChange = (rows)=>{
  data.ids = rows.map(row=>row.id).join()
}
//批量删除
const delAll=()=>{
  if(data.ids.length === 0){
    ElMessage.warning({message:'请选择需要删除的项',plain:true,grouping: true})
    return false;
  }else {
    ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗?', { type: 'warning' }).then(res => {
      request.post('ordermsgDeleteAll',qs.stringify({
        vals:data.ids
      })).then(res => {
        if (res.code === '200') {
          load()
          ElMessage.success('操作成功')
        } else {
          ElMessage.error(res.msg)
        }
      })
    }).catch(err => {})
  }

}

load()

/*onMounted(() => {
  load(data.pageNum)
})*/

</script>
